.p-theme{
  p.title{
    width: 100%;
    padding: 1% 2%;
    font-size: 18px;
    color: #444444;
    margin-bottom: 0;

    span.fr{
      float: right;
    }
    span:not(.fr){
      padding-left: 10px;
        border-left: 3px solid #ef4954;
      a{
        display: inline-block;
      }
    }
  }
  .block-box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div{
      position: relative;
      margin: 0 20px 20px;
      flex-basis: 16.66%;
      cursor: pointer;
      border: 2px solid #fff;
      border-radius: 10px;
      &.select{
        border: 4px solid #ef4954;
      }
      img{
        width: 100%;
        height: auto;
        display: block;
      }
      p{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 18px;
        color: #fff;
        padding: 0 20px 20px;
      }
    }
  }
}
.p-type{
  p.title{
    width: 100%;
    padding: 1% 2%;
    font-size: 18px;
    color: #444444;
    margin-bottom: 0;
    span.fr{
      float: right;
    }
    span:not(.fr){
      border-left: 3px solid #ef4954;
      padding-left: 10px;
      a{
        display: inline-block;
      }
    }
  }
  .block-box{
    display: flex;
    flex-direction: row;
    &>div{
      position: relative;
      flex-basis: 16.66%;
      margin: 0 20px;
      border: 2px solid #fff;
      border-radius: 10px;
      cursor: pointer;
      &.select{
        border: 4px solid #ef4954;
      }
      img{
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 2;
      }
      &>p{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        z-index: 3;
      }
      &:hover{
        ul{
          display: block;
        }
      }
      ul{
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        display: none;
        top: calc(100% - 10px);
        li{
          padding: 15px 25px;
          background: #b8b6f8;
          color: #666666;
          font-size: 14px;
          cursor: pointer;
          &:hover,&.select{
            background: #827ff3 !important;
            color: #fff !important;
          }
          &:first-of-type{
            padding-top: 25px;
          }
          &:last-of-type{
            border-radius: 0 0 10px 10px;
          }
        }
      }
    }
  }
}
